
<template>
    <div class="menuIframeContainer">
        
        <mt-header title="小老弟点餐系统" id="mainHead">
            <a  @click="back()" slot="left">
                <mt-button icon="back">返回</mt-button>
            </a>
        </mt-header>

		<div class="mainContext_out">
			<transition name="menuAnimat2">
				<router-view class="mainContext"></router-view>
			</transition>
		</div>
    
    </div>

</template>


<script>
export default {
    methods:{
		back(){
			this.$router.go(-1);
		}
	}
}
</script>



<style scoped>

    #navFoot{
        background-color: #fdfdfd;
		
    }

	.menuAnimat2-enter-active,.menuAnimat2-leave-active{
		transition: all 1s ease;
		position: fixed;	
	}


	.menuAnimat2-enter{
		transform: translateX(100%);
        width: 100%;
         opacity: 0;
	}


	.menuAnimat2-leave-to{
		transform: translateX(-100%);
        width: 100%;
         opacity: 0;
	}

    .menuIframeContainer{
        height: 100%;
    }
    

</style>

<style lang="less" scoped>
.mainContext_out{
		width: 100%;
		height: calc(~"100% - 40px");
		padding: 1vw;
	}
</style>


<style>
    #mainHead h1{
        font-size: 18px;
        font-weight: bold;
    }




</style>

